<!DOCTYPE HTML>
<html>
<head>
    <title> 搜索表单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="/static/bui/css/dpl.css" rel="stylesheet"/>
    <link href="/static/bui/css/bui.css" rel="stylesheet"/>

    <link rel="stylesheet" href="/static/zTree_v3/css/demo.css" type="text/css" />
    <link rel="stylesheet" href="/static/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" />

    <link rel="stylesheet" href="http://g.tbcdn.cn/fi/bui/css/layout-min.css" />
    <style type="text/css">
         .panel .form-horizontal{
             padding-top:15px;
         }
        .panel .actions-bar {
            margin-bottom: 0;
        }
    </style>

</head>
<body>

<!--<div class="content" style="padding-left: 10px;">-->

<!--</div>-->


<div id="content" class="hide">
    <form id="J_Form" class="form-horizontal">
        <input type="hidden" name="a" value="3"/>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label"><s>*</s>角色名</label>
                <div class="controls">
                    <input name="name" type="text" data-rules="{required:true}" class="input-normal control-text"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label"><s>*</s>状态：</label>
                <div class="controls">
                    <select  data-rules="{required:true}"  name="state" class="input-normal">
                        <option value="">请选择</option>
                        <option value="1">可用</option>
                        <option value="0">屏蔽</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span15" style="height: 75px;">
                <label class="control-label">描述：</label>
                <div class="controls">
                    <textarea name="description" class="input-large" type="text"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span15" style="height: 75px;">
                <label class="control-label">角色：</label>
                <div id="s1" class="controls" style="height: 58px">
                    <input type="hidden" id="roleIds" name="roleIds"/>
                </div>
            </div>
        </div>
    </form>
</div>


<div class="content">
    <!--<div class="detail-section">-->
        <div class="row">
            <div id="J_Layout">

            </div>
        </div>
    <!--</div>-->
    <div class="row">

    </div>
</div>


<!--=====================-->
<div class="row">
    <div class="span20 panel panel-head-borded panel-small">

        <div class="panel-header">
            <h2>角色列表</h2>
        </div>
        <div class="row" style="margin-left:2px">
            <form id="searchForm" class="form-horizontal" tabindex="0" style="outline: none;">
                <label class="control-label">角色名称：</label>
                <input type="text" class="control-text" name="name"/>
               <button id="btnSearch" type="submit" class="button button-primary">搜索</button>
            </form>

            <div id="grid">

            </div>
        </div>
    </div>
    <div class="span15 panel panel-small">
        <div class="panel-header">
            <h2>角色修改</h2>
        </div>
        <form id="J_Form1" class="form-horizontal" action="role/save" method="post">
            <div class="row">
                <div class="span8">
                    <div class="control-group">
                        <label class="control-label"><s>*</s>角色名称：</label>
                        <div class="controls">
                            <input name="id" type="hidden"/>
                            <input name="createTime" type="hidden"/>
                            <input id="name" name="name" type="text" data-rules="{required:true}" data-messages="{required:'供应商编码不能为空'}" class="input-normal control-text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">状态：</label>
                        <div class="controls">
                            <select id="state" name="state" class="input-normal">
                                <option value="1">可用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">描述：</label>
                        <div class="controls control-row4">
                            <textarea id="description" name="description" class="input-normal" type="text"></textarea>
                        </div>
                    </div>
                </div>
                <div class="span6">
                    <div class="control-group">
                        <label class="control-label">权限列表：</label>
                        <ul id="treeDemo" class="ztree"></ul>
                        <input id="menuIds" name="menuIds" type="hidden"/>
                    </div>
                </div>
            </div>
            <div class="form-actions actions-bar centered">
                <button id="J_Add" type="button" class="button button-primary">添加</button>
                <button type="submit" class="button button-primary">保存</button>
                <button id="J_Reset" type="button" class="button">重置</button>
            </div>
        </form>
    </div>

</div>

<!--===============================-->


<script src="/static/bui/js/sea.js"></script>
<script src="/static/bui/js/config.js"></script>


<script src="/static/bui/js/jquery-1.8.1.min.js"></script>
<script src="/static/bui/js/bui.js"></script>

<!--<script type="text/javascript" src="/static/zTree_v3/js/jquery-1.4.4.min.js"></script>-->
<script type="text/javascript" src="/static/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/zTree_v3/js/jquery.ztree.excheck.js"></script>

<script type="text/javascript">

    //select多选角色
    var Select = BUI.Select,
            Data = BUI.Data;

    var store = new Data.Store({
                url : 'role/enabledList',
                autoLoad : true
            }),
            select = new Select.Select({
                render:'#s1',
                valueField:'#roleIds',
                multipleSelect : true,
                store : store
            });
    select.render();
    select.on('change', function(ev){
//        alert(ev.item.text);
    });


    // var data;
    // $.ajax({
    //     url: "role/list",
    //     type: 'GET',
    //     dataType: 'json',
    //     timeout: 25000,
    //     error: function () {
    //         alert('Error ');
    //     },
    //     success: function (result) {
    //         data = result.rows;
    //     }
    // });

    var Grid = BUI.Grid,
            Store = BUI.Data.Store,
            enumState = {"1":"可用","0":"屏蔽"},
            columns = [
                {title:'用户id',dataIndex:'id',width:60},
                {title:'用户名称',dataIndex:'name',width:100},
                {title:'状态',dataIndex:'state',width:60,renderer:BUI.Grid.Format.enumRenderer(enumState)},
                {title:'创建时间',dataIndex:'createTime',width:160,renderer:BUI.Grid.Format.datetimeRenderer},
                {title:'描述',dataIndex:'description',width:200},
                {title:'操作',dataIndex:'',width:100,renderer : function(value,obj){
                        var editStr1 = '<span class="grid-command btn-edit" title="编辑用户信息">编辑</span>';//页面操作不需要使用Search.createLink
                    var editStr2 = '<span class="grid-command btn-del" title="删除用户信息">删除</span>';//页面操作不需要使用Search.createLink
                    return editStr1+editStr2;
                }}
            ],
            editing = new Grid.Plugins.DialogEditing({
                contentId : 'content', //设置隐藏的Dialog内容
                triggerCls : 'btn-edit', //触发显示Dialog的样式
                editor : {
                    title: '编辑',
                    listeners : {
                        show: function () {
                            select.on('onclick', function(ev){
                                alert(ev.item.text);
                            });
                        }
                    }
                },
                autoSave : true
            }),
            store = new Store({
                url: 'role/list',
                proxy : {
                    save : { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
                        updateUrl : 'role/edit',
                        addUrl : 'role/add',
                        removeUrl : 'role/del'
                    }
                },
                autoSync : true, //保存数据后，自动更新
                autoLoad:true,
                pageSize:10
            }),
            grid = new Grid.Grid({
                render:'#grid',
                loadMask: true,
                forceFit: true,
                columns : columns,
                store: store,
                // plugins : [Grid.Plugins.AutoFit], //勾选插件、自适应宽度插件
                tbar:{// 底部工具栏
                    items : [{
                        btnCls : 'button button-small',
                        text : '<i class="icon-plus"></i>添加',
                        listeners : {'click' : addFunction}
                    }]
                },
                bbar : {// 顶部工具栏
                    pagingBar:true
                },
                plugins : [editing] // 插件形式引入多选表格
            });

    //保存或者读取失败
    store.on('exception',function (ev) {
        var e = ev.error;
        BUI.Message.Alert('出现异常:'+JSON.stringify(e.jqXHR.status));
    });



    function addFunction(){
        var type = {saveType : 'add'}; //标志是新增加的记录
        editing.add(type,'name'); //添加记录后，直接编辑
    }

    //删除操作
    function delFunction(){
        var selections = grid.getSelection();
        delItems(selections);
    }

    function delItems(items){
        var ids = [];
        BUI.each(items,function(item){
            ids.push(item.id);
        });

        if(ids.length){
            BUI.Message.Confirm('确认要删除选中的记录么？',function(){
                store.save('role/del',{ids : ids});
            },'question');
        }
    }

    //监听事件，删除一条记录
    grid.on('cellclick',function(ev){
        var sender = $(ev.domTarget); //点击的Dom
        if(sender.hasClass('btn-del')){
            var record = ev.record;
            delItems([record]);
        }
    });

    //创建表单，表单中的日历，不需要单独初始化
    var searchForm = new BUI.Form.HForm({
        srcNode : '#searchForm'
    }).render();

    searchForm.on('beforesubmit',function(ev) {
        //序列化成对象
        var obj = searchForm.serializeToObject();
        obj.start = 0; //返回第一页
        store.load(obj);
        return false;
    });


    //ztree
    function zTreeOnCheck(event, treeId, treeNode) {
        var tree = $.fn.zTree.getZTreeObj("treeDemo"),checks = tree.getCheckedNodes(true),ids="-1";
        $.each(checks,function(index,value,array){
            if(value.id != undefined){
                ids+=","+value.id;
            }
        });
        $("#menuIds").val(ids)
    }

    //菜单加载
    function loadRoleMenus(menuIds) {
        var setting = {
            callback: {
                onCheck: zTreeOnCheck
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        var zNodes;
        $.ajax({
            url: "role/userRoleMenus?menuIds="+menuIds,
            type: 'GET',
            dataType: 'json',
            timeout: 25000,
            error: function () {
                alert('Error ');
            },
            success: function (result) {
                //加载权限
                $(document).ready(function(){
                    $.fn.zTree.init($("#treeDemo"), setting, result);
                });
            }
        });
    }



    grid.render();


    //==========================================
    BUI.use(['bui/form'],function(Form){
        var form = new Form.HForm({ //创建表单
            srcNode : '#J_Form1',
            submitType : 'ajax',
            callback : function(data){
                if(data.success){
                    if(data.isNew){ //如果是增加数据
                        var idField = form.getField('id'); //新增记录时，服务器端返回id
                        idField.enable();
                        idField.set('value',data.id);
                        var record = this.serializeToObject();
                        store.add(record,true); //第二个参数标示不允许添加重复的记录，以匹配函数为标准

                    }else{ //编辑数据
                        var record = this.serializeToObject();
                        store.update(record,true); //第二个参数标示使用匹配函数
                    }
                }

            }
        }).render();

        $('#J_Reset').on('click',function(){
            form.reset();
        });

        $('#J_Add').on('click',function(){
            var idField = form.getField('id');
            idField.set('value','');
            idField.disable(); //添加的记录不需要添加编号，禁用，不参与校验
            form.submit({data : {isNew : true}});
        });

        grid.on('rowselected',function(ev){
            var record = ev.record;
            loadRoleMenus(record.menuIds);
            form.getField('id').enable();
            form.set('initRecord',record); //也可以使用form.setRecord()，但是form.reset()方法会无效
        });
    });
    //==============================================



</script>

</body>
</html>
